<template>
  <div class="no401">
    <div class="no401-c">
      <div class="hint">
        <h2 style="color: #1890FF;">OOPS</h2>
        <p>All rights reserved <a style="text-decoration: none; color: #1890FF;" href="javascript:;">wallstreetcn</a></p>
        <h3>The webmaster said that you can not enter this page...</h3>
        <p class="hint-content">Please check that the URL you entered is correct, or click the button below to return to the homepage.</p>
        <el-button type="primary" @click="backToHome">back to home</el-button>
      </div>
      <img src="../../assets/401.gif" height="80%" width="40%">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    backToHome() {
      this.$router.push('/home')
    }
  },
  mounted() {
    const elMain = document.querySelector('.el-main')
    const no401 = document.querySelector('.no401')
    no401.style.height = elMain.offsetHeight - 20 + 'px'
  }
}
</script>

<style scoped>
  .no401 {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .no401-c {
    display: flex;
    width: 80%;
    height: 100%;
  }
  .hint {
    height: 100%;
    width: 30%;
    padding-top: 17%;
    margin: 0 100px 0 20px;
  }
  .hint-content {
    margin: 20px 0;
    color: #a9a9a9;
  }
  .el-button {
    border-radius: 20px;
  }
</style>
